<!DOCTYPE html>
<head>	
	<script type="text/javascript" src="http://cdn.craftycomponents.com/crafty-dev-develop-uncompressed.js"></script>
	<style>
		body, html { margin:0; padding: 0; overflow:hidden; font-family:Arial; font-size:20px }
		#cr-stage { color:white }
	</style>
</head>
<body>
<script type="text/javascript">
	Crafty.init(600, 300);
	Crafty.background('rgb(127,127,127)');

	Crafty.scene("game", function() {
		//Paddles
		Crafty.e("Paddle, 2D, DOM, Color, Multiway")
			.color('rgb(255,0,0)')
			.attr({ x: 20, y: 100, w: 10, h: 100 })
			.multiway(4, { W: -90, S: 90 });
		Crafty.e("Paddle, 2D, DOM, Color, Multiway")
			.color('rgb(0,255,0)')
			.attr({ x: 580, y: 100, w: 10, h: 100 })
			.multiway(4, { UP_ARROW: -90, DOWN_ARROW: 90 });

		//Ball
		Crafty.e("2D, DOM, Color, Collision")
			.color('rgb(0,0,255)')
			.attr({ x: 300, y: 150, w: 10, h: 10, 
					dX: Crafty.math.randomInt(2, 5), 
					dY: Crafty.math.randomInt(2, 5) })
			.bind('UpdateFrame', function () {
				//hit floor or roof
				if (this.y <= 0 || this.y >= 290)
					this.dY *= -1;

				if (this.x > 600) {
					this.x = 300;
					Crafty("LeftPoints").each(function () { 
						this.text(++this.points + " Points") });
				}
				if (this.x < 10) {
					this.x = 300;
					Crafty("RightPoints").each(function () { 
						this.text(++this.points + " Points") });
				}

				this.x += this.dX;
				this.y += this.dY;
			})
			.onHit('Paddle', function () {
			this.dX *= -1;
		})

		//Score boards
		Crafty.e("LeftPoints, DOM, 2D, Text")
			.attr({ x: 20, y: 20, w: 100, h: 20, points: 0 })
			.text("0 Points");
		Crafty.e("RightPoints, DOM, 2D, Text")
			.attr({ x: 515, y: 20, w: 100, h: 20, points: 0 })
			.text("0 Points");
	})
	Crafty.e("2D, DOM, Text").attr({x:250, y:130, w: 300 }).text("Click to play...");
	Crafty.e("2D, DOM, Mouse").attr({x:0, y:0, h:300, w:600 }).bind("Click", function() { Crafty.scene("game");})
</script>

</body>
</html>